<template>
  <div :class="{ 'pa-4': !noPadding }" ref="outerElement" style="position: relative">
    <Loading v-if="loading && itemList.length === 0" class="mt-12"></Loading>
    <div v-else :class="{ scroll: props.oneLine }" ref="scrollElement">
      <v-row class="ma-n1" :class="{ 'one-line': props.oneLine }">
        <MediaColumn
          v-for="(item, i) in itemList"
          class="pa-1"
          :key="item.id"
          :item="item"
          :cols="colsList[i]"
          :preview-mode="previewMode"
          :preview-visitor="previewVisitor"
          @click="!isAd(item) && emit('click:item', i)"
          @bounding="(bounds) => emit('bounding', bounds, i)"
          @selected="(item) => emit('selected', item)"
          ref="itemRefs"
        ></MediaColumn>
        <v-col v-if="!hideLast" cols="12">
          <div v-intersect="onIntersect" class="text-center font-size-14 font-weight-500 line-height-140 mb-16">
            <div v-if="loading">{{ $t('common.loading') }}</div>
            <div v-else-if="noMore && itemList.length > 0">{{ $t('common.noMore') }}</div>
            <ErrorNodata v-else-if="noMore && itemList.length === 0" class="my-16"> </ErrorNodata>
          </div>
        </v-col>
      </v-row>
    </div>
    <SwipeArrow
      v-if="oneLine"
      :show-left="showLeft"
      :show-right="showRight"
      :to-left="moveToLeft"
      :to-right="moveToRight"
      light-bg
    ></SwipeArrow>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { VCol, VRow } from 'vuetify/components'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import Loading from '@/components/common/Loading.vue'
import MediaColumn from '@/components/media/MediaColumn.vue'
import { useFeedCols } from '@/compositions/feed/feedCols'
import { useHorizontalScroll } from '@/compositions/sensor/horizontal-scroll'
import { AD_TYPE } from '@/constant'
import SwipeArrow from '../common/SwipeArrow.vue'

const props = defineProps({
  items: { type: Array, required: true },
  loading: { type: Boolean, default: false },
  noMore: { type: Boolean, default: false },
  previewMode: { type: Boolean, default: false },
  previewVisitor: { type: Boolean, default: false },
  hideLast: { type: Boolean, default: false },
  noPadding: { type: Boolean, default: false },
  oneLine: { type: Boolean, default: false },
})

const emit = defineEmits(['intersect', 'click:item', 'bounding', 'selected'])

const onIntersect = (entry) => {
  if (entry === false) return
  if (props.loading) return
  emit('intersect')
}

const { itemList, colsList, input, reset } = useFeedCols()
watch(
  () => props.items,
  (newItems) => {
    const newLen = newItems.length
    const oldLen = itemList.value.length
    if (newLen < oldLen || itemList.value.some((d, i) => d.id !== newItems[i].id)) {
      reset()
      input(newItems.slice())
    } else {
      input(newItems.slice(oldLen))
    }
  },
  { immediate: true, deep: true },
)

const isAd = (item) => item.type === AD_TYPE.VIDEO || item.type === AD_TYPE.PHOTO

const outerElement = ref(null)
const scrollElement = ref(null)
const itemRefs = ref([])
const { showLeft, showRight, moveToLeft, moveToRight } = useHorizontalScroll(outerElement, scrollElement, itemRefs)
</script>
<style scoped lang="scss">
.one-line {
  flex-wrap: nowrap;
}

.scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
</style>
